<template>
  <div id="app">
    <!-- 头部 -->
    <div class="header" v-if="!show">
      <van-nav-bar
        title="题库选择"
        left-text="返回"
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>

    <!-- 搜索框 -->
    <div>
      <van-search
        v-model="value"
        @blur="search(value)"
         show-action
        placeholder="请输入题库名称关键词"
      >
      <template #action>
        <div @click="onSearch">取消</div>
      </template>
      </van-search>
    </div>

    <div class="middle" v-if="!show">
      <!-- 左边 -->
      <van-sidebar v-model="activeKey" class="leftt">
        <van-sidebar-item
          @click="ADD(item.id)"
          :title="item.name"
          v-for="(item, index) in left"
          :key="index"
        />
      </van-sidebar>

      <!-- 右边内容 -->
      <div v-for="(item, index) in right" :key="index">
        <div>
          <p class="pa">{{ item.name }}</p>
        </div>

        <div v-for="i in item.bank" :key="i.id">
          <p class="pb">{{ i.name }}</p>
        </div>
      </div>
    </div>

    <div v-show="show" v-for="item in searchList" :key="item.id">
      <p class="pc">{{ item.name }}</p>
    </div>

    <div v-if="!isShow" class="pd">没有搜到相关数据</div>
  </div>
</template>

<script>
import { cyjleft, cyjright, seach } from "../../../../request/http";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      left: [],
      id: "",
      right: [],
      show: false,
      searchList: [],
      isShow: -1,
      firstId: "",
    };
  },
  created() {},
  mounted() {
    this.getLeft();
    this.getRight();
  },
  methods: {
    //表头返回
    onClickLeft() {
      this.$router.push("/practise");
    },

    //获取左侧内容
    getLeft() {
      cyjleft().then((res) => {
        console.log(res);

        this.left = res;
      });
    },
    //获取右侧内容
    getRight() {},

    ADD(id) {
      cyjright({
        id: id,
      }).then((res) => {
        console.log(res);

        this.right = res;
      });
    },

    // 搜索
    async search(value) {
      const res = await seach(value);
      console.log(res);
      this.show = true;
      if (res.length == 0) {
        this.isShow = false;
      } else {
        this.isShow = true;
        this.searchList = res;
      }
    },
    onSearch() {
      this.show = false;
    },
  },
};
</script>

<style lang='scss' scoped>
#app {
  width: 100%;
  height: 100%;
  .header {
    height: 10%;
  }
  .middle {
    display: flex;

    .left {
      width: 25%;
      height: 90%;
      overflow: scroll;
    }
    .right {
      width: 75%;
      height: 90%;
      overflow: scroll;
      .small {
        p {
          font-size: 20px;
        }
        .mini {
          width: 150px;
          height: 50px;
          background: #fdefe5;
          color: orange;
          text-align: center;
          line-height: 50px;
        }
      }
    }
  }
}
.pa {
  font-size: 16px;
  width: 90px;
  height: 25px;
  background: #cccccc;
  text-align: center;
  margin: 0px 6px;
}
.pb {
  font-size: 16px;
  width: 90px;
  height: 25px;
  background: #f0f0f0;
  text-align: center;
}
.pc {
  font-size: 16px;
  width: 90px;
  height: 25px;
  text-align: center;
  margin: 0px 6px;
}
.pd {
  font-size: 16px;
}
</style>
